<template>
  <div class="card animate__animated animate__slideInDown">
    <div class="card-nav">
      <img
        class="card-logo animate__animated animate__wobble"
        src="../assets/azheng66.png"
        alt=""
      />
      <div
        class="card-title animate__animated animate__lightSpeedInLeft animate__delay-2s"
      >
        能坚持别人不能坚持的, 才能拥有别人不能拥有的。
      </div>
      <div style="margin-top:20px">
        <span class="pointer" text="" @click="handleGitee">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gitee"></use>
          </svg>
          Gitee
        </span>
        <span class="pointer" @click="handleBili">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bilibili"></use>
          </svg>
          Bilibili
        </span>
        <span class="pointer">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-pinpaibiaoshi_wangyiyouxiang"></use>
          </svg>
          邮箱：wzw96430@163.com
        </span>
      </div>
      <svg
        class="icon icon-footer animate__animated animate__zoomIn animate__infinite pointer"
        aria-hidden="true"
        @click="handleStart"
      >
        <use xlink:href="#icon-qidong"></use>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    handleGitee() {
      window.open("https://gitee.com/zhengwei66");
    },
    handleBili() {
      window.open("https://space.bilibili.com/14800883/");
    },
    handleStart() {
      this.$router.push("/home");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.card {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url("../assets/magda.jpg") no-repeat;
  background-size: 100% 100%;
  .card-nav {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .card-logo {
      width: 100px;
      height: 100px;
      position: relative;
      border-radius: 50%;
      overflow: hidden;
    }
    .card-title {
      margin-top: 20px;
      font-size: 28px;
      font-weight: 600;
      font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
      color: #fff;
    }
    .icon-footer {
      width: 30px;
      height: 30px;
      position: absolute;
      color: #fff;
      bottom: 10%;
    }
  }
}
</style>
